<template>
  <div>
    <h1>课程中心</h1>
    <div class="select-box">
      <span>订单状态</span>
      <el-select v-model="orderStatus" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span>订单编号</span>
      <el-input
          style="width: 200px; margin-right: 10px"
          placeholder="请输入订单号"
          v-model="orderNo"          
        />
        <el-button type="primary" >查询</el-button>
    </div>
    <el-table :data="table" border stripe style="width: 100%">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="body" label="内容"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, onBeforeMount, toRefs } from "vue";
import { getData } from "../http/api";
import { IResponse } from "../http";
import { AxiosResponse } from "axios";
export default {
  name: "CourseList",
  setup() {
    const mydata = reactive({
      table: [],
      options: [{
        value: '',
        label: '全部'
      }, {
        value: 0,
        label: '待支付'
      }, {
        value: 1,
        label: '已支付'
      }, {
        value: 2,
        label: '配货完成'
      }, {
        value: 3,
        label: '出库成功'
      }, {
        value: 4,
        label: '交易成功'
      }, {
        value: -1,
        label: '手动关闭'
      }, {
        value: -2,
        label: '超时关闭'
      }, {
        value: -3,
        label: '商家关闭'
      }]
      
    });
    const getCourseListFun = () => {
      getData.then(res => {
        mydata.table = res.data;
      });
    };

    onMounted(() => {
      getCourseListFun();
    });

    return {
      
      //mydata
       ...toRefs(mydata)
  
    };
  }
};
</script>

<style lang="scss" scoped>
.select-box{
  margin-right: 50px;
  >div{
    margin-right: 20px;
    margin-bottom: 10px;
    span{
      margin-right: 10px;
    }
  }
 
}
</style>